<template>
  <div class="c-bg-sgray">
    <div>
      <my-small-tabbar class="c-bg-white" :tabList="tabList" :tabIndex="tabIndex" @changeTab="clickTab"></my-small-tabbar>
      <section v-if="tabIndex == 0" class="c-pt24 c-ph24">
        <div class="c-mb24 c-br12 c-ph24 c-pv24 c-bg-white c-flex-row" v-for="(item,index) in examinationList" :key="index" @click="clickExaminationItem(item.examStatus,item.paperMainId,item.goOnNum,item.hasAns,index,item.hasPermisson,item.enableDayPractice, item.restart)">
          <div class="c-ww180 c-br12 c-maxh120  c-text-hidden c-p">
            <img class="c-w100" :src="$addXossFilter(item.avatar, require('../../../assets/examination_defult.png'))" @error="item.avatar = require('../../../assets/examination_defult.png')" alt="" />
          </div>
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pl20">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
            <div class="c-fs18 c-fc-gray c-text-ellipsis1">{{item.description}}</div>
            <div class="c-flex-row c-aligni-center">
              <span class="c-fs18 c-ph8 c-pv2 c-lh-n theme-bg-10 c-fc-white c-br4 c-mr8 c-p c-vcAlign-middle c-mr10" v-if="item.enableDayPractice==1">
                <span class="theme-fc c-fs18">每日一练</span>
                <span class="c-pa prodType-triangle"></span>
              </span>
            </div>
            <div class="c-flex-row c-fs20">
              <div class="c-flex-1 c-fc-gray">{{item.type==1?'考试':'小测试'}} <span>| 共{{item.hasAns}}题</span><span v-if='item.examStatus==1'></span></div>
              <div v-if="item.enableShowAnswer==1">
                <div class="c-fc-mblue c-flex-row c-aligni-end" v-if='item.examStatus==1&&item.isCheck!=-1'>
                  <span v-if="item.enableShowAccuracy ==1">正确率{{Number(item.accuracy*100).toFixed(0)}}%</span>
                  <span v-else-if ="item.enableShowRightNum==1">做对{{item.rightNum}}题</span>
                </div>
                <div class="c-fc-mblue c-fs20" v-else-if="item.examStatus==1&&item.isCheck==-1">等待批阅</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div v-if="tabIndex == 1 || tabIndex == 2" class="c-ph24 c-pt24">
        <div class="c-flex-row c-ph24 c-mb24 c-pv24 c-bg-white c-br12" @click="clickMutualItem(item.paperMainId)" v-for="(item, index) in examinationList" :key="index">
          <div class="c-ww180 c-maxh120 c-br12 c-text-hidden c-p">
            <img class="c-w100" :src="$addXossFilter(item.avatar, require('../../../assets/examination_defult.png'))" @error="item.avatar = require('../../../assets/examination_defult.png')" alt="" />
          </div>
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pl20">
            <div class="c-fs24 c-text-ellipsis2">{{item.name}}</div>
            <div class="c-flex-row c-aligni-center">
              <span class="c-fs18 c-fc-gray c-lh">{{item.price * 1 > 0 && !$isWxAppIos() ? '已售':'已测'}}{{item.subscribers}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (examinationList && examinationList.length > 0)" :noData="examinationList.length == 0" :noDataText="'你暂时还没有考试哦'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
// import ExaminationItem from "@/components/templates/examinationItem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: "MyExamination",
  components: {
    // ExaminationItem,
    loadingStatusTem,
    MySmallTabbar,
  },
  props: [],
  data() {
    return {
      examinationList: [],
      hasData: false,
      tabIndex: 0,
      page: 1,
      is_page: false,
      limit: 10,
      isLoading: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      isDetailBack: false, // 是否是从本页面跳转到测评详情页在跳转回来
      tabList: [{
        title: '考试',
        index: 0,
      }, {
        title: '互动',
        index: 1,
      }, {
        title: '语音',
        index: 2,
      }],
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    $route: function (to, from) {
      if (to.path == "/homePage/mutuaTest/mutuaTestDetail" || from.path == "/homePage/mutuaTest/mutuaTestDetail" || to.path == "/homePage/voiceTest/voiceTestDetail" || from.path == "/homePage/voiceTest/voiceTestDetail") {
        this.isDetailBack = true;
      } else {
        this.isDetailBack = false;
        // this.examinationList = [];
      }
    }
  },
  methods: {
    clickTab(index) {
      if (this.isLoading) {
        return;
      }
      this.tabIndex = index;
      this.hasData = false;
      this.page = 1;
      this.is_page = false;
      this.examinationList = [];
      this.getMore();
    },
    getExaminationList() {
      //获取测试题目列表
    },
    clickExaminationItem(examStatus, paperMainId, goOnNum, hasAns, eIndex, hasPermisson, enableDayPractice, restart) {
      let $this = this;
      console.log(enableDayPractice == 1 && restart == 1, examStatus)
      if (hasPermisson != 1) {
        $this.$routerGo($this, "push", {
          path: "/homePage/testPaper/testDetail",
          query: { testId: paperMainId }
        });
        return
      }
      if (enableDayPractice == 1 && restart == 1) {
        $this.$routerGo($this, "push", {
          path: "/homePage/testPaper/testDetail",
          query: { testId: paperMainId}
        });
      } else {
          if (examStatus == 1) {
            $this.$routerGo($this, "push", {
              path: "/homePage/examination/examinationResult",
              query: { paperMainId: paperMainId, entyCenter: 1 }
            });
          } else if (examStatus == 2) {
              if (hasAns == 0) {
                $this.$showCjToast({
                  text: "该考试暂无题目，请联系管理员",
                  type: 'warn',
                  time: 3000
                });
              } else {
                utilJs.getMethod(global.apiurl + 'paper/judgeEntry/' + paperMainId, function (res) {
                  if (res.status == 1) {
                    $this.$routerGo($this, "push", {
                      path: "/homePage/examination/examinationAnswer",
                      query: { paperMainId: paperMainId, goOnNum: goOnNum, entyCenter: 1 }
                    });
                  } else {
                    $this.$showCjToast({
                      text: res.msg + '</br>' + res.showTime,
                      type: 'warn'
                    });
                  }
                })
              }
          } else {
            utilJs.getMethod(global.apiurl + 'paper/judgeEntry/' + paperMainId, function (res) {
              if (res.status == 1) {
                $this.$routerGo($this, "push", {
                  path: "/homePage/examination/examinationAnswer",
                  query: { paperMainId: paperMainId, goOnNum: goOnNum, entyCenter: 1 }
                });
              } else {
                $this.$showCjToast({
                  text: res.msg + '</br>' + res.showTime,
                  type: 'warn'
                });
              }
          })
        }
      }
    },
    clickMutualItem(paperMainId) {
      if (this.tabIndex == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/mutuaTest/mutuaTestDetail",
          query: { mutuaTestId: paperMainId }
        });
      } else if (this.tabIndex == 2) {
        this.$routerGo(this, "push", {
          path: "/homePage/voiceTest/voiceTestDetail",
          query: { paperMainId: paperMainId }
        });
      }
    },
    getMore() {
      let $this = this;
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let urlT = '';
      if (this.tabIndex == 0) {
        urlT = global.apiurl + 'paper/myPapers?page=' + this.page + '&limit=' + this.limit;
      } else if (this.tabIndex == 1 || this.tabIndex == 2) {
        urlT = global.apiurl + 'speech/paperTestCenter?type=' + this.tabIndex + '&page=' + this.page + '&limit=' + this.limit;
      }
      utilJs.getMethod(urlT, function (res) {
        $this.isLoading = false;
        $this.examinationList = $this.examinationList.concat(res.data);
        $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
        $this.hasData = true;
      });
    },
    //下滑获取更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的测评", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的测评", "", shareUrl, "");
    },
    initData() {
      this.page = 1;
      this.is_page = false;
      this.examinationList = [];
      this.hasData = false;
      this.isLoading = false;
      if (!this.isDetailBack) {
        if (this.companyAuth && this.companyAuth.enableExamModule == 1) {
          this.tabIndex = 0;
          this.getMore();
        } else if (this.companyAuth && this.companyAuth.enableMutualTestModule == 1) {
          this.tabIndex = 1;
          this.getMore();
        } else if (this.companyAuth && this.companyAuth.enableSpeechTestModule == 1) {
          this.tabIndex = 2;
          this.getMore();
        } else {
          this.tabIndex = 0;
          this.hasData = true;
        }
      }
    },
  },
  activated() {
    setDocumentTitle("我的测评");// eslint-disable-line
    // this.examinationList = [];
    // this.hasData = false;
    // this.page = 1;
    // this.is_page = false;
    // this.isLoading = false;
    this.tabList = [{
      title: '考试',
      index: 0,
    }, {
      title: '互动',
      index: 1,
    }, {
      title: '语音',
      index: 2,
    }];
    if (utilJs.checkNeedInitData(this.examinationList, this.page)) {
      this.initData()
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.examination-item {
  height: 5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  margin-bottom: 0.4rem;
  display: flex;
  display: -webkit-flex;
}
.examination-img {
  width: 2.5rem;
  height: 5rem;
  border-radius: 0.25rem;
  min-width: 2.5rem;
}
.examination-img img {
  width: 100%;
  height: 100%;
}
.prodType-triangle {
    width: 0;
    height: 0;
    border-width: 0.2rem 0.2rem 0 0.2rem;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    bottom: 0;
    right: 0;
}
</style>